<template>
	<view class="par">
		<view class="desc">
			<text>门店名称</text>
		</view>
		<view class="content">
			<uni-easyinput v-model="store.name" placeholder="请输入内容"></uni-easyinput>
		</view>
		<view class="desc">
			<text>门店地址</text>
		</view>
		<view class="content">
			<uni-easyinput v-model="store.addressLat" placeholder="请输入内容"></uni-easyinput>
		</view>
		<view class="desc">
			<text>联系电话</text>
		</view>
		<view class="content">
			<uni-easyinput v-model="store.servicePhone" placeholder="请输入内容"></uni-easyinput>
		</view>
		<view class="desc">
			<text>营业时间</text>
		</view>
		<view class="content">
			<uni-easyinput v-model="store.onlineTime" placeholder="请输入内容"></uni-easyinput>
		</view>
		<view class="desc">
			<text>具体营业时间</text>
			<view class="helpcl" @click="showTishi()">
				<image class="helpicon" src="/static/imgs/help.png"></image>
			</view>
		</view>
		<view class="content">
			<view style="display: flex;">
				<view class="uni-list"
					style="width:230rpx;height: 60rpx;border-style: solid;border-width: 1rpx;border-color: #afafaf;border-radius: 10rpx;">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker mode="time" :value="store.startTime" @change="bindStartDateChange">
								<view class="uni-input" style="line-height: 30rpx;text-align: center;color: #838383;">
									{{store.startTime}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view style="color: #afafaf;">——</view>
				<view class="uni-list"
					style="width:230rpx;height: 60rpx;border-style: solid;border-width: 1rpx;border-color: #afafaf;border-radius: 10rpx;">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker mode="time" :value="store.endTime" @change="bindEndDateChange">
								<view class="uni-input" style="line-height: 30rpx;text-align: center;color: #838383;">
									{{store.endTime}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="desc">
			<text>预留打扫时间</text>
		</view>
		<view class="content">
			<uni-easyinput v-model="store.dasaoTime" placeholder="请输入内容"></uni-easyinput>
		</view>
		<view class="desc">
			<text>美团店铺id</text>
		</view>
		<view class="content">
			<uni-easyinput v-model="store.openShopUuid" placeholder="请输入内容"></uni-easyinput>
		</view>
		<view class="desc">
			<text>抖音店铺id</text>
		</view>
		<view class="content">
			<uni-easyinput v-model="store.douyinPoiid" placeholder="请输入内容"></uni-easyinput>
		</view>
		<view class="desc">
			<text>公告标题</text>
			<view class="helpcl" @click="showImage">
				<image class="helpicon" src="/static/imgs/help.png"></image>
			</view>
		</view>
		<view class="content">
			<uni-easyinput maxlength="10" v-model="store.noticeTitle" placeholder="请输入内容"></uni-easyinput>
		</view>
		<view class="desc">
			<text>公告内容</text>
			<view class="helpcl" @click="showImage">
				<image class="helpicon" src="/static/imgs/help.png"></image>
			</view>
		</view>
		<view class="content">
			<uni-easyinput borderColor="#00aa7f" maxlength='-1' type="textarea" autoHeight v-model="store.noticeContent"
				placeholder="请输入内容">
			</uni-easyinput>
		</view>
		<view class="afrim" @click="save()">确认修改</view>
		<view style="height: 20rpx;"></view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	export default {
		data() {
			return {
				store: {},
			}
		},
		onLoad(options) {
			this.getStoreById(options.storeId);
		},
		methods: {
			bindStartDateChange(e) {
				this.store.startTime = e.detail.value;
			},
			bindEndDateChange(e) {
				this.store.endTime = e.detail.value;
			},
			async getStoreById(storeId) {
				let data = await Api.apiCall('get', Api.qsg.getStore, {
					storeId: storeId
				});
				if (data) {
					console.log(data)
					this.store = data
				}
			},
			async save(storeId) {
				let params = {
					id: this.store.id,
					name: this.store.name,
					addressLat: this.store.addressLat,
					servicePhone: this.store.servicePhone,
					onlineTime: this.store.onlineTime,
					dasaoTime: this.store.dasaoTime,
					openShopUuid: this.store.openShopUuid,
					douyinPoiid: this.store.douyinPoiid,
					noticeTitle: this.store.noticeTitle,
					noticeContent: this.store.noticeContent,
					startTime: this.store.startTime,
					endTime: this.store.endTime
				}
				let data = await Api.apiCall('post', Api.qsg.updateStore, params);
				if (data) {
					uni.showToast({
						icon: 'success',
						title: '提交成功'
					})
				}
			},
			showImage() {
				// 图片地址数组
				const imageList = ['http://qsg.wuminginfo.com/activity.png'];
				uni.previewImage({
					current: 0, // 当前显示图片索引
					urls: imageList // 需要预览的图片 HTTP 链接列表
				});
			},
			showTishi(){
				uni.showToast({
					icon:'none',
					title:'具体营业时间范围外不提供下单和预约',
					duration:6000
				})
			}
		}
	}
</script>

<style>
	.par {
		margin-left: 25rpx;
	}

	.content {
		width: 700rpx;
	}

	.helpcl {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 5rpx;
	}

	.unipopup {
		height: auto;
		width: 480rpx;
		background-color: #FFFFFF;
		font-size: 28px;
		border-radius: 24rpx;
		padding-bottom: 20rpx;
		z-index: 2;
	}

	.desc {
		font-size: 26rpx;
		color: #6d6d6d;
		letter-spacing: 1rpx;
		margin-top: 40rpx;
		margin-bottom: 5rpx;
		display: flex;
	}

	.helpicon {
		height: 30rpx;
		width: 30rpx;
	}

	.afrim {
		width: 650rpx;
		height: 80rpx;
		background: #0DA944;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin-left: 25rpx;
		margin-top: 20rpx;
	}
</style>
